<template>
	<div>
		<div class="head-top">
			<mt-header title="消息中心">
				<router-link to="/myself" slot="left">
					<mt-button icon="back"></mt-button>
				</router-link>
			</mt-header>
		</div>

		<div class="main">

			<mt-navbar class="home-nav" v-model='active'>
				<mt-tab-item class='nav-title' id='organization'>机构</mt-tab-item>
				<mt-tab-item class='nav-title' id='system'>系统</mt-tab-item>
			</mt-navbar>

			<mt-tab-container v-model="active" swipeable>

				<mt-tab-container-item id="organization" >
					
					<div class="cells" v-for='(item,index) in lisdataOrg' :key="index" @click='orgdata(item.id)'>
						<img class="left" src="../../../../static/myself/msg.png" alt="" />

						<div class="center" >
							<span clnass="subtitle" v-text="item.title"></span>
							<!--<span class="colo">我在一个一个比较喜欢读书的人，平时有空的时候就会去书店，待上个一天</span>-->
						</div>
						<!--<div class="right">1小时前</div>-->
					</div>

				</mt-tab-container-item>

				<mt-tab-container-item id="system" >

					<div class="cells"  v-for= '(item,index) in lisdataSys' :key="index" @click="sysdata(item.id)">
						<img class="left" src="../../../../static/myself/msg-icon.png" alt="" />

						<div class="center" >
							<span class="subtitle" v-text="item.title"></span>
							<!--<span class="colo">我在一个一个比较喜欢读书的人，平时有空的时候就会去书店，待上个一天</span>-->
						</div>
						<!--<div class="right">1小时前</div>-->
					</div>

				</mt-tab-container-item>

			</mt-tab-container>
		</div>
		
	</div>
</template>

<script>
	import api from './../../../api/api.js'

	export default {
		name: 'message',
		data() {
			return {
				active: 'organization',
				datevalue:'',
				lisdataOrg:[],
				lisdataSys:[],
			}

		},
		created() {
			this.datevalue = this.formatDate(new Date().getTime());
			this.getinfOrg();
			this.getinfoSys();
		},
		methods: {
			orgdata(event){
				this.$router.push({
					path: 'orgmsgdetails',
					name:'orgmsgdetails',
					params: {
					    ids: event,
					}
				})
			},
			sysdata(event){
				this.$router.push({
					path: 'sysmsgdetails',
					name:'sysmsgdetails',
					params: {
					    ids: event,
					}
				})
			},
			getinfOrg() {
				this.$http({
						method: 'post',
						url: api.baseURL + 'queryNoticeList',
						params: {
							inParam: {
								time: this.datevalue,
								sysCode: "FH_PUBOPE",
								accId: "1", 
								orgId: "1",
								terminalType: 1, 
								callType: 1,
								currentPage: 1,
								pageSize: 10,
							}

						}
					})
					.then(response => {
						console.log(response.data.data)
						this.lisdataOrg = response.data.data;
					})
					.catch(error => {
						console.log(error);
						alert(error)
					});
			},
			getinfoSys() {
				this.$http({
						method: 'post',
						url: api.baseURL + 'queryNoticeList',
						params: {
							inParam: {
								time: this.datevalue,
								sysCode: "FH_PUBOPE",
								accId: "1", 
								orgId: "1",
								terminalType: 1, 
								callType: 2,
								currentPage: 1,
								pageSize: 10,
							}

						}
					})
					.then(response => {
						this.lisdataSys = response.data.data;
					})
					.catch(error => {
						console.log(error);
						alert(error)

					});
			},
		},

	}
</script>

<style scoped>
	/*navbar-swper滑动颜色*/
	
	.mint-navbar .mint-tab-item.is-selected {
		border-bottom: 1px solid #e60012;
		color: #e60012;
		/*margin-bottom: -1px;*/
	}
	
	.home-nav {
		margin-bottom: 2px;
	}
	
	.main .cells {
		width: 100%;
		height: 60px;
		margin-top: 2px;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #000000;
	}
	
	.center {
		width: 60%;
		display: flex;
		flex-direction: column;
		margin: 0 15px;
	}
	
	.center .subtitle {
		font-size: 16px;
	}
	
	.colo {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #cdcdcd;
		font-size: 14px;
	}
	
	.right {
		width: 10%;
		white-space: nowrap;
		color: #cdcdcd;
		font-size: 14px;
		margin-right: 15px;
	}
</style>